<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="_assert/css/jquery-ui.css" />
		<link type="text/css" rel="stylesheet" href="_assert/css/jPages.css" />
		<link type="text/css" rel="stylesheet" href="_assert/css/common.css" />
		<style>
		</style>
	</head>
	<body>
		<div class="header">
			<img src="_assert/img/header.png" width="100%" />
		</div>
		<div class="content overhidden">
			<div class="celan"><img src="_assert/img/celan.png" />
			</div>
			<div class="contentR">
				<div class="userManage overhidden">
					<div class="terms">
						<div class="name overhidden" style="padding-top:20px;">
							<div class="title">
								时间：
							</div>
							<ul>
								<li class="focus">
									所有
								</li>
								<li>
									当日
								</li>
								<li>
									三天内
								</li>
								<li>
									七天内
								</li>
								<li>
									三十天内
								</li>
								<li class="dateL">
									<input type="text" id="datepicker" placeholder="年/月/日" >
								</li>
								<li class="sub">
									-
								</li>
								<li class="dateR">
									<input type="text" id="datepicker1" placeholder="年/月/日">
								</li>
								<li class="btn">
									<button>
										确定
									</button>
								</li>
							</ul>
						</div>
						<div class="name overhidden">
							<div class="title">
								性别：
							</div>
							<ul>
								<li class="focus">
									所有
								</li>
								<li>
									男
								</li>
								<li>
									女
								</li>

							</ul>
						</div>
						<div class="name overhidden">
							<div class="title">
								城市：
							</div>
							<ul>
								<li class="focus">
									所有
								</li>
								<li>
									北京
								</li>
								<li>
									上海
								</li>
								<li>
									广州
								</li>
								<li>
									深圳
								</li>
								<li>
									南京
								</li>
								<li>
									成都
								</li>
								<li>
									重庆
								</li>
								<li>
									苏州
								</li>
								<li>
									杭州
								</li>
								<li>
									长沙
								</li>
								<li>
									重庆
								</li>
							</ul>
						</div>
						<div class="name overhidden">
							<div class="title">
								状态：
							</div>
							<ul>
								<li class="focus">
									所有
								</li>
								<li>
									禁用中
								</li>

							</ul>
						</div>
						<div class="name overhidden">
							<div class="title">
								权限：
							</div>
							<ul>
								<li class="focus">
									所有
								</li>
								<li>
									夜店管理员
								</li>
								<li>
									现场经理
								</li>

							</ul>
						</div>
						<div class="name overhidden">
							<div class="title">
								手机：
							</div>
							<ul>
								<li class="focus phone">
									<input type="text" placeholder="请输入搜索的名称" />
								</li>
								<li class="pBtn">
									<button type="button">
										确定
									</button>
								</li>

							</ul>
						</div>
					</div>
				</div>
				<div class="userInfo overhidden">
					<div class="sortDiv">
						<div class="pr50">
							排序：
						</div>
						<div>
							<button class="focus">
								默认
							</button>
							<button>
								人气指数
							</button>
							<button>
								积分
							</button>
						</div>
						<div class="page" id="pageT">
							<span class="left" ></span><span class="currentP">1</span><span>/</span><span class="totalP"></span>
							<span class="right" ></span>
						</div>
						<div class="num mr150">
							共找到<span>121</span>位用户
						</div>

					</div>

					<table style="width:100%" cellspacing="0" cellpadding="0" border="0">
						<thead>
							<tr>
								<td>
								<input type="checkbox" name="CheckAll" class="checkAll" />
								ID</td>
								<td>头像</td>
								<td>昵称</td>
								<td>手机号码</td>
								<td>性别</td>
								<td>城市</td>
								<td>出生日期</td>
								<td>积分</td>
								<td>人气指数</td>
								<td>身份</td>
								<td>举报数/被举报数</td>
								<td>状态</td>
								<td>订单数</td>
								<td>关注数</td>
								<td>动态数</td>
							</tr>
						</thead>
						<tbody id="movies">
							<tr>
								<td>
								<input type="checkbox" name="idCheck"  class="idCheck"/>
								156857</td>
								<td><img src="_assert/img/user1.png" /></td>
								<td>Jasmine</td>
								<td>13865844265</td>
								<td>男</td>
								<td>深圳</td>
								<td>1991/06/02</td>
								<td>762</td>
								<td>夜店管理员</td>
								<td>3250</td>
								<td>正常</td>
								<td>15 / 15</td>
								<td>15</td>
								<td>78</td>
								<td>156</td>
							</tr>
							<tr>
								<td>
								<input type="checkbox" name="idCheck"  class="idCheck"/>
								156857</td>
								<td><img src="_assert/img/user1.png" /></td>
								<td>Jasmine</td>
								<td>13865844265</td>
								<td>男</td>
								<td>深圳</td>
								<td>1991/06/02</td>
								<td>762</td>
								<td>夜店管理员</td>
								<td>3250</td>
								<td>正常</td>
								<td>15 / 15</td>
								<td>15</td>
								<td>78</td>
								<td>156</td>
							</tr>
							<tr>
								<td>
								<input type="checkbox" name="idCheck"  class="idCheck"/>
								156857</td>
								<td><img src="_assert/img/user1.png" /></td>
								<td>Jasmine</td>
								<td>13865844265</td>
								<td>男</td>
								<td>深圳</td>
								<td>1991/06/02</td>
								<td>762</td>
								<td>夜店管理员</td>
								<td>3250</td>
								<td>正常</td>
								<td>15 / 15</td>
								<td>15</td>
								<td>78</td>
								<td>156</td>
							</tr>
							<tr>
								<td>
								<input type="checkbox" name="idCheck"  class="idCheck"/>
								156857</td>
								<td><img src="_assert/img/user1.png" /></td>
								<td>Jasmine</td>
								<td>13865844265</td>
								<td>男</td>
								<td>深圳</td>
								<td>1991/06/02</td>
								<td>762</td>
								<td>夜店管理员</td>
								<td>3250</td>
								<td>正常</td>
								<td>15 / 15</td>
								<td>15</td>
								<td>78</td>
								<td>156</td>
							</tr>
							<tr>
								<td>
								<input type="checkbox" name="idCheck"  class="idCheck"/>
								156857</td>
								<td><img src="_assert/img/user1.png" /></td>
								<td>Jasmine</td>
								<td>13865844265</td>
								<td>男</td>
								<td>深圳</td>
								<td>1991/06/02</td>
								<td>762</td>
								<td>夜店管理员</td>
								<td>3250</td>
								<td>正常</td>
								<td>15 / 15</td>
								<td>15</td>
								<td>78</td>
								<td>156</td>
							</tr>

						</tbody>
					</table>
					<div class="delBtn">
						<button  type="button">
							删除
						</button>
					</div>
					<div class="holder"></div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="_assert/js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="_assert/js/jquery-ui.js"></script>
		<script type="text/javascript" src="_assert/js/jPages.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".contentR").width($(".content").width() - 301);
				$("div.holder").jPages({
					containerID : "movies",
					previous : "上一页",
					next : "下一页",
					perPage : 3,
					delay : 0,
					callback : function(page, item) {
						console.log(item);
						$(".userInfo .sortDiv div.page span.currentP").text(page.current);
						$(".userInfo .sortDiv div.page span.totalP").text(page.count);
						$(".userInfo .sortDiv div.num span").text(item.count);
						if ($("div.holder a.jp-previous").hasClass("jp-disabled")) {
							$(".userInfo .sortDiv div.page span.left").addClass("disA");
						}
						if ($("div.holder a.jp-next").hasClass("jp-disabled")) {
							$(".userInfo .sortDiv div.page span.right").addClass("disA");
						}
						if (!$("div.holder a.jp-previous").hasClass("jp-disabled")) {
							$(".userInfo .sortDiv div.page span.left").removeClass("disA");
						}
						if (!$("div.holder a.jp-next").hasClass("jp-disabled")) {
							$(".userInfo .sortDiv div.page span.right").removeClass("disA");
						}
					}
				});
			});

			$("#datepicker1").datepicker({
				showOn:"button",
				follow : '#datepickerI',
				buttonImage:"_assert/img/arrow.png",
				dateFormat : "yy/mm/dd"
			});
			$("#datepicker").datepicker({
				showOn:"button",
				follow : '#datepicker',
				buttonImage:"_assert/img/arrow.png",
				dateFormat : "yy/mm/dd",
				onselect : function(date, formatDate) {
					$('#datepicker1').val(formatDate);
				}
			});
			
			$(".userInfo .sortDiv div.page span.left").click(function() {
				$("div.holder a.jp-previous").trigger("click");
			});
			$(".userInfo .sortDiv div.page span.right").click(function() {
				$("div.holder a.jp-next").trigger("click");
			});
			$("table tbody").delegate("tr td input[type='checkbox']", "click", function() {
				console.log($(this).parent().parent().siblings("tr"));
				$(this).parent().parent().siblings("tr").removeClass("focus").end().addClass("focus");
			});
			$(".userInfo .sortDiv div button").click(function() {
				console.log($(this).siblings());
				$(this).siblings("button").removeClass("focus").end().addClass("focus");
			});
			
			$(".terms .name ul li:not(li.btn)").click(function(){
				console.log($(this).siblings().removeClass("focus"));
				$(this).siblings("li").removeClass("focus").end().addClass("focus");
			});
			$("input.checkAll").click(function(){
				console.log($(this).prop("checked"));
				$("table tbody input[type='checkbox']").prop("checked",$(this).prop("checked"));
			});
		</script>
	</body>
</html>